<template>
    <div class="songlist-container">
        <h1 class="page-title">{{ pageTitle }}</h1>
        <div class="playlist-grid">
            <PlaylistCard 
                v-for="(playlist, index) in currentPagePlaylists" 
                :key="index"
                :coverUrl="playlist.coverUrl"
                :name="playlist.name"
            />
        </div>
        
        <!-- 分页组件 -->
        <div class="pagination-container">
            <div class="pagination">
                <!-- < -->
                <button 
                    class="page-btn" 
                    :disabled="currentPage === 1"
                    @click="goToPage(currentPage - 1)"
                >
                    <
                </button>
                
                <!-- 页码 -->
                <div class="page-numbers">
                    <button 
                        v-for="page in visiblePages" 
                        :key="page"
                        class="page-number"
                        :class="{ active: page === currentPage }"
                        @click="goToPage(page)"
                    >
                        {{ page }}
                    </button>
                </div>
                
                <!-- > -->
                <button 
                    class="page-btn" 
                    :disabled="currentPage === totalPages"
                    @click="goToPage(currentPage + 1)"
                >
                    >
                </button>
                
                <!-- 跳页功能 -->
                <div class="jump-page">
                    <span>跳至</span>
                    <input 
                        v-model.number="jumpPageNumber" 
                        type="number" 
                        :min="1" 
                        :max="totalPages"
                        class="jump-input"
                        @keyup.enter="jumpToPage"
                    />
                    <span>页</span>
                    <button class="jump-btn" @click="jumpToPage">跳转</button>
                </div>
                
                <!-- 页面信息 -->
                <div class="page-info">
                    共 {{ totalItems }} 项，第 {{ currentPage }} / {{ totalPages }} 页
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import PlaylistCard from './PlaylistCard.vue';

const playlists = [];


// 音乐类型数组
const musicTypes = [
    '流行金曲', '经典老歌', '摇滚精选', '民谣时光', '电子音乐', '爵士乐章', '古典音乐', '说唱热门',
    '轻音乐', '华语流行', '欧美热歌', '日韩音乐', '独立音乐', '蓝调音乐', '乡村音乐', '新世纪音乐',
    '世界音乐', '儿童歌曲', '影视原声', '游戏音乐', '舞曲精选', '金属摇滚', '朋克音乐', '雷鬼音乐',
    '拉丁音乐', '凯尔特音乐', '福音音乐', '灵魂乐', '放克音乐', '迪斯科', '新浪潮', '后摇滚',
    '氛围音乐', '极简主义', '实验音乐', '噪音音乐', '工业音乐', '暗潮音乐', '哥特音乐', '新古典',
    '巴洛克音乐', '浪漫主义', '印象派', '现代古典', '室内乐', '交响乐', '协奏曲', '奏鸣曲',
    '歌剧选段', '音乐剧', '百老汇', '爵士标准', '比波普', '酷爵士', '融合爵士', '自由爵士',
    '蓝调摇滚', '芝加哥蓝调', '德尔塔蓝调', '电蓝调', '节奏蓝调', '新灵魂乐', '摩城音乐', '放克摇滚',
    '迷幻摇滚', '前卫摇滚', '艺术摇滚', '华丽摇滚', '硬摇滚', '重金属', '黑金属', '死亡金属',
    '力量金属', '前卫金属', '交响金属', '哥特金属', '工业金属', '新金属', '另类金属', '后硬核',
    '情绪核', '数学摇滚', '后朋克', '新浪潮朋克', '流行朋克', '硬核朋克', '直边朋克', '无政府朋克',
    '合成器流行', '新浪潮电子', '科技舞曲', '浩室音乐', '迷幻电子', '氛围电子', '智能舞曲', '鼓打贝斯',
    '英式摇滚', '独立流行', '梦幻流行', '噪音流行', '低保真', '卧室流行', '合成器流行', '电子流行'
];

// 生成999个播放列表
for (let i = 1; i <= 999; i++) {
    const randomType = musicTypes[Math.floor(Math.random() * musicTypes.length)];
    playlists.push({
        name: `${randomType} ${i}`,
        coverUrl: `https://picsum.photos/200/200?random=${i}`
    });
}

// 分页相关状态
const currentPage = ref(1);
const pageSize = 50;
const jumpPageNumber = ref(1);
const props = defineProps({
  title: {
    type: String,
    default: '全部歌单'
  }
});

const pageTitle = ref(props.title);

watch(() => props.title, (newTitle) => {
  pageTitle.value = newTitle;
});

// 计算属性
const totalItems = computed(() => playlists.length);
const totalPages = computed(() => Math.ceil(totalItems.value / pageSize));

// 当前页显示的播放列表
const currentPagePlaylists = computed(() => {
    const start = (currentPage.value - 1) * pageSize;
    const end = start + pageSize;
    return playlists.slice(start, end);
});

// 可见页码
const visiblePages = computed(() => {
    const pages = [];
    const total = totalPages.value;
    const current = currentPage.value;
    
    if (total <= 7) {
        // 总页数小于等于7，显示所有页码
        for (let i = 1; i <= total; i++) {
            pages.push(i);
        }
    } else {
        // 总页数大于7，显示部分页码
        if (current <= 4) {
            // 当前页在前4页
            for (let i = 1; i <= 5; i++) {
                pages.push(i);
            }
            pages.push('...');
            pages.push(total);
        } else if (current >= total - 3) {
            // 当前页在后4页
            pages.push(1);
            pages.push('...');
            for (let i = total - 4; i <= total; i++) {
                pages.push(i);
            }
        } else {
            // 当前页在中间
            pages.push(1);
            pages.push('...');
            for (let i = current - 1; i <= current + 1; i++) {
                pages.push(i);
            }
            pages.push('...');
            pages.push(total);
        }
    }
    
    return pages;
});

// 跳转到指定页
const goToPage = (page) => {
    if (page >= 1 && page <= totalPages.value) {
        currentPage.value = page;
    }
};

// 跳页功能
const jumpToPage = () => {
    if (jumpPageNumber.value >= 1 && jumpPageNumber.value <= totalPages.value) {
        currentPage.value = jumpPageNumber.value;
    }
};
</script>

<style scoped>
.songlist-container {
    padding: 0px 10px 80px 70px;
    background-color: transparent;
    min-height: 100vh;
}

.page-title {
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    margin: 20px 0 30px 20px;
    text-align: left;
}

.playlist-grid {
    display: grid;
    grid-template-columns: repeat(5, 220px);
    gap: 30px;
    justify-content: start;
    margin-left: 20px;
    margin-bottom: 40px;
}

/* 分页样式 */
.pagination-container {
    display: flex;
    justify-content: flex-start;
    margin-top: 40px;
    margin-left: -35px;
    padding: 20px 0;
    min-width: 1200px;
    white-space: nowrap;
    overflow-x: auto;
    width: 100%;
}

.pagination {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 1000px;
    flex-shrink: 0;
    width: 100%;
    min-width: 1200px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.page-btn {
    padding: 12px 16px;
    background-color: transparent;
    color: #fff;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-btn:hover:not(:disabled) {
    color: #ff0000;
}

.page-btn:disabled {
    background-color: rgba(34, 34, 34, 0.3);
    color: #666;
    cursor: not-allowed;
}

.page-numbers {
    display: flex;
    gap: 5px;
    align-items: center;
}

.page-number {
    padding: 12px 12px;
    background-color: transparent;
    color: #fff;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 40px;
}

.page-number:hover {
    color: #ff0000;
}

.page-number.active {
    background-color: #ff0000;
    color: #fff;
}

.jump-page {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
}

.jump-input {
    width: 60px;
    padding: 12px 8px;
    background-color: #333;
    color: #fff;
    border: 1px solid #555;
    border-radius: 0;
    text-align: center;
}

.jump-input:focus {
    outline: none;
    border-color: #ff0000;
}

.jump-btn {
    padding: 12px 12px;
    background-color: transparent;
    color: #fff;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.jump-btn:hover {
    color: #ff0000;
}

.page-info {
    color: #ccc;
    font-size: 14px;
    white-space: nowrap;
}


</style>